<?php
// 启动会话管理
session_start();

// 登录验证
function checkLogin() {
    if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
        showLoginPage();
        exit;
    }
}

// 显示登录页面
function showLoginPage() {
    $error = '';
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $username = trim($_POST['username'] ?? '');
        $password = trim($_POST['password'] ?? '');
        $config = include __DIR__ . '/config/admin/passwd/passwd.php';
// 验证用户名密码
        if ($username === $config['username'] && $password === $config['password']) {
            $_SESSION['logged_in'] = true;
            header('Location: ' . $_SERVER['PHP_SELF']);
            exit;
        } else {
            $error = "用户名或密码错误";
        }
    }
    
    $html = <<<HTML
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FWC文件管理器 - 登录</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <style>
            :root {
                --md-sys-color-primary: #006e1c;
                --md-sys-color-on-primary: #ffffff;
                --md-sys-color-primary-container: #90f891;
                --md-sys-color-on-primary-container: #002204;
                --md-sys-color-secondary: #52634f;
                --md-sys-color-on-secondary: #ffffff;
                --md-sys-color-secondary-container: #d5e8ce;
                --md-sys-color-on-secondary-container: #101f10;
                --md-sys-color-surface: #fcfdf6;
                --md-sys-color-on-surface: #1a1c18;
                --md-sys-color-surface-variant: #e0e4d6;
                --md-sys-color-on-surface-variant: #43483e;
                --md-sys-color-outline: #73796d;
                --md-sys-color-outline-variant: #c3c8bb;
                --md-sys-color-error: #ba1a1a;
                --md-sys-color-on-error: #ffffff;
                --md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
                --md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
                --md-sys-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
                --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
                --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
                --md-sys-motion-duration-short: 200ms;
                --md-sys-motion-duration-medium: 300ms;
                --md-sys-motion-duration-long: 400ms;
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Inter', sans-serif;
                background: var(--md-sys-color-surface);
                color: var(--md-sys-color-on-surface);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: fadeIn 0.6s var(--md-sys-motion-easing-standard);
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .login-container {
                background: var(--md-sys-color-surface);
                border-radius: 28px;
                box-shadow: var(--md-sys-elevation-3);
                padding: 48px;
                max-width: 448px;
                width: 90%;
                text-align: center;
                animation: slideUp 0.8s var(--md-sys-motion-easing-emphasized);
            }
            
            @keyframes slideUp {
                from { 
                    opacity: 0; 
                    transform: translateY(40px) scale(0.95); 
                }
                to { 
                    opacity: 1; 
                    transform: translateY(0) scale(1); 
                }
            }
            
            .login-icon {
                width: 72px;
                height: 72px;
                background: var(--md-sys-color-primary-container);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 24px;
                animation: bounceIn 1s var(--md-sys-motion-easing-emphasized);
            }
            
            @keyframes bounceIn {
                0% { 
                    opacity: 0; 
                    transform: scale(0.3) rotate(-180deg); 
                }
                50% { 
                    opacity: 0.9; 
                    transform: scale(1.1) rotate(5deg); 
                }
                100% { 
                    opacity: 1; 
                    transform: scale(1) rotate(0deg); 
                }
            }
            
            h1 {
                font-size: 24px;
                font-weight: 400;
                margin-bottom: 8px;
                color: var(--md-sys-color-on-surface);
                animation: fadeIn 0.8s var(--md-sys-motion-easing-standard) 0.2s both;
            }
            
            .subtitle {
                font-size: 14px;
                color: var(--md-sys-color-on-surface-variant);
                margin-bottom: 32px;
                animation: fadeIn 0.8s var(--md-sys-motion-easing-standard) 0.3s both;
            }
            
            .form-group {
                margin-bottom: 16px;
                text-align: left;
                animation: fadeIn 0.8s var(--md-sys-motion-easing-standard) 0.4s both;
            }
            
            .form-group:nth-child(2) {
                animation-delay: 0.5s;
            }
            
            .form-group label {
                display: block;
                font-size: 14px;
                font-weight: 500;
                color: var(--md-sys-color-on-surface-variant);
                margin-bottom: 8px;
            }
            
            .input-container {
                position: relative;
            }
            
            .input-container .material-icons {
                position: absolute;
                left: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--md-sys-color-on-surface-variant);
                font-size: 20px;
                transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
            }
            
            .form-input {
                width: 100%;
                padding: 16px 16px 16px 48px;
                border: 1px solid var(--md-sys-color-outline);
                border-radius: 4px;
                background: var(--md-sys-color-surface);
                color: var(--md-sys-color-on-surface);
                font-size: 16px;
                transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
            }
            
            .form-input:focus {
                outline: none;
                border-color: var(--md-sys-color-primary);
                border-width: 2px;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 110, 28, 0.1);
            }
            
            .form-input:focus + .material-icons {
                color: var(--md-sys-color-primary);
                transform: translateY(-50%) scale(1.1);
            }
            
            .login-btn {
                width: 100%;
                padding: 16px 24px;
                background: var(--md-sys-color-primary);
                color: var(--md-sys-color-on-primary);
                border: none;
                border-radius: 100px;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.1px;
                cursor: pointer;
                margin-top: 24px;
                transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
                position: relative;
                overflow: hidden;
                animation: fadeIn 0.8s var(--md-sys-motion-easing-standard) 0.6s both;
            }
            
            .login-btn::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: width 0.6s, height 0.6s;
            }
            
            .login-btn:hover::before {
                width: 300px;
                height: 300px;
            }
            
            .login-btn:hover {
                box-shadow: var(--md-sys-elevation-2);
                transform: translateY(-2px);
            }
            
            .login-btn:active {
                transform: translateY(0);
                transition: transform 0.1s;
            }
            
            .error-message {
                background: var(--md-sys-color-error-container);
                color: var(--md-sys-color-on-error-container);
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 16px;
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 8px;
                animation: shake 0.5s var(--md-sys-motion-easing-standard);
            }
            
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }
        </style>
    </head>
    <body>
        <div class="login-container">
            <div class="login-icon">
                <span class="material-icons">folder_managed</span>
            </div>
            <h1>FWC文件管理器</h1>
            <p class="subtitle">请登录以访问您的文件</p>
            
            {ERROR}
            
            <form method="post">
                <div class="form-group">
                    <label for="username">登录码</label>
                    <div class="input-container">
                        <span class="material-icons">person</span>
                        <input type="text" id="username" name="username" class="form-input" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="password">验证码</label>
                    <div class="input-container">
                        <span class="material-icons">lock</span>
                        <input type="password" id="password" name="password" class="form-input" required>
                    </div>
                </div>
                
                <button type="submit" class="login-btn">
                    登录
                </button>
            </form>
        </div>
    </body>
    </html>
HTML;
    
    if (!empty($error)) {
        $errorHtml = '<div class="error-message">
                        <span class="material-icons">error</span>
                        ' . htmlspecialchars($error) . '
                      </div>';
        echo str_replace('{ERROR}', $errorHtml, $html);
    } else {
        echo str_replace('{ERROR}', '', $html);
    }
    exit;
}

// 检查登录状态
checkLogin();

// 安全设置
$rootDir = __DIR__;
$currentDir = isset($_GET['dir']) ? $_GET['dir'] : '';
$fullPath = rtrim($rootDir, '/') . '/' . ltrim($currentDir, '/');

if (!is_dir($fullPath) || strpos(realpath($fullPath), realpath($rootDir)) !== 0) {
    $fullPath = $rootDir;
    $currentDir = '';
}

$message = '';
$messageType = '';

// 处理登出
if (isset($_GET['logout'])) {
    $_SESSION['logged_in'] = false;
    session_destroy();
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// 处理下载
if (isset($_GET['download'])) {
    $fileToDownload = rtrim($rootDir, '/') . '/' . ltrim($_GET['download'], '/');
    if (is_file($fileToDownload) && strpos(realpath($fileToDownload), realpath($rootDir)) === 0) {
        header('Content-Description: File Transfer');
        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename="'.basename($fileToDownload).'"');
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($fileToDownload));
        readfile($fileToDownload);
        exit;
    } else {
        $message = "无法下载文件：文件不存在或没有权限";
        $messageType = "error";
    }
}

// 处理删除
if (isset($_POST['delete'])) {
    $itemToDelete = rtrim($rootDir, '/') . '/' . ltrim($_POST['delete_path'], '/');
    handleDelete($itemToDelete);
}

// 处理批量删除
if (isset($_POST['batch_delete']) && isset($_POST['selected_items']) && is_array($_POST['selected_items'])) {
    $successCount = 0;
    $failCount = 0;
    
    foreach ($_POST['selected_items'] as $itemPath) {
        $itemToDelete = rtrim($rootDir, '/') . '/' . ltrim($itemPath, '/');
        if (handleDelete($itemToDelete, false)) {
            $successCount++;
        } else {
            $failCount++;
        }
    }
    
    $message = "批量删除完成：成功删除 $successCount 项，失败 $failCount 项";
    $messageType = $failCount > 0 ? "warning" : "success";
}

// 处理重命名
if (isset($_POST['rename'])) {
    $oldPath = rtrim($rootDir, '/') . '/' . ltrim($_POST['old_path'], '/');
    $newName = trim($_POST['new_name']);
    $newPath = dirname($oldPath) . '/' . $newName;
    
    if (empty($newName)) {
        $message = "重命名失败：名称不能为空";
        $messageType = "error";
    } elseif ((is_file($oldPath) || is_dir($oldPath)) && strpos(realpath($oldPath), realpath($rootDir)) === 0) {
        if (file_exists($newPath)) {
            $message = "重命名失败：名称已存在";
            $messageType = "error";
        } elseif (rename($oldPath, $newPath)) {
            $message = "已成功重命名为：" . $newName;
            $messageType = "success";
        } else {
            $message = "重命名失败：没有权限或系统错误";
            $messageType = "error";
        }
    } else {
        $message = "无法重命名：项目不存在或没有权限";
        $messageType = "error";
    }
}

// 处理新建文件夹
if (isset($_POST['create_folder'])) {
    $folderName = trim($_POST['folder_name']);
    $newFolderPath = $fullPath . '/' . $folderName;
    
    if (empty($folderName)) {
        $message = "新建文件夹失败：名称不能为空";
        $messageType = "error";
    } elseif (file_exists($newFolderPath)) {
        $message = "新建文件夹失败：名称已存在";
        $messageType = "error";
    } elseif (mkdir($newFolderPath, 0755, true)) {
        $message = "已成功创建文件夹：" . $folderName;
        $messageType = "success";
    } else {
        $message = "新建文件夹失败：没有权限或系统错误";
        $messageType = "error";
    }
}

// 处理新建文件
if (isset($_POST['create_file'])) {
    $fileName = trim($_POST['file_name']);
    $newFilePath = $fullPath . '/' . $fileName;
    
    if (empty($fileName)) {
        $message = "新建文件失败：名称不能为空";
        $messageType = "error";
    } elseif (file_exists($newFilePath)) {
        $message = "新建文件失败：名称已存在";
        $messageType = "error";
    } elseif (file_put_contents($newFilePath, '') !== false) {
        $message = "已成功创建文件：" . $fileName;
        $messageType = "success";
    } else {
        $message = "新建文件失败：没有权限或系统错误";
        $messageType = "error";
    }
}

// 处理文件上传
if (isset($_POST['upload_file'])) {
    if (isset($_FILES['file']['error']) && $_FILES['file']['error'] == UPLOAD_ERR_OK) {
        $uploadFile = $fullPath . '/' . basename($_FILES['file']['name']);
        
        if (file_exists($uploadFile)) {
            $message = "上传失败：文件已存在";
            $messageType = "error";
        } elseif (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
            $message = "已成功上传：" . basename($_FILES['file']['name']);
            $messageType = "success";
        } else {
            $message = "上传失败：没有权限或系统错误";
            $messageType = "error";
        }
    } else {
        $errorCodes = [
            UPLOAD_ERR_INI_SIZE => "上传文件超过了php.ini中的限制",
            UPLOAD_ERR_FORM_SIZE => "上传文件超过了表单中的限制",
            UPLOAD_ERR_PARTIAL => "文件只有部分被上传",
            UPLOAD_ERR_NO_FILE => "没有文件被上传",
            UPLOAD_ERR_NO_TMP_DIR => "找不到临时文件夹",
            UPLOAD_ERR_CANT_WRITE => "文件写入失败",
            UPLOAD_ERR_EXTENSION => "文件上传被扩展阻止"
        ];
        
        $errorCode = $_FILES['file']['error'] ?? UPLOAD_ERR_NO_FILE;
        $message = "上传失败：" . ($errorCodes[$errorCode] ?? "未知错误");
        $messageType = "error";
    }
}

// 处理复制操作
if (isset($_POST['copy']) && isset($_POST['copy_path'])) {
    $sourcePath = rtrim($rootDir, '/') . '/' . ltrim($_POST['copy_path'], '/');
    if ((is_file($sourcePath) || is_dir($sourcePath)) && strpos(realpath($sourcePath), realpath($rootDir)) === 0) {
        $_SESSION['clipboard'] = [
            'type' => 'copy',
            'path' => $_POST['copy_path'],
            'name' => basename($sourcePath)
        ];
        $message = "已复制：" . basename($sourcePath);
        $messageType = "success";
    } else {
        $message = "复制失败：项目不存在或没有权限";
        $messageType = "error";
    }
}

// 处理剪切操作
if (isset($_POST['cut']) && isset($_POST['cut_path'])) {
    $sourcePath = rtrim($rootDir, '/') . '/' . ltrim($_POST['cut_path'], '/');
    if ((is_file($sourcePath) || is_dir($sourcePath)) && strpos(realpath($sourcePath), realpath($rootDir)) === 0) {
        $_SESSION['clipboard'] = [
            'type' => 'cut',
            'path' => $_POST['cut_path'],
            'name' => basename($sourcePath)
        ];
        $message = "已剪切：" . basename($sourcePath);
        $messageType = "success";
    } else {
        $message = "剪切失败：项目不存在或没有权限";
        $messageType = "error";
    }
}

// 处理粘贴操作
if (isset($_POST['paste']) && isset($_SESSION['clipboard'])) {
    $clipboard = $_SESSION['clipboard'];
    $sourcePath = rtrim($rootDir, '/') . '/' . ltrim($clipboard['path'], '/');
    $destinationPath = $fullPath . '/' . $clipboard['name'];
    
    // 处理重名情况
    $counter = 1;
    $originalName = $clipboard['name'];
    $nameWithoutExt = pathinfo($originalName, PATHINFO_FILENAME);
    $extension = pathinfo($originalName, PATHINFO_EXTENSION);
    $extension = $extension ? '.' . $extension : '';
    
    while (file_exists($destinationPath)) {
        $newName = $nameWithoutExt . " ($counter)" . $extension;
        $destinationPath = $fullPath . '/' . $newName;
        $counter++;
    }
    
    if (is_file($sourcePath)) {
        // 复制文件
        if (copy($sourcePath, $destinationPath)) {
            if ($clipboard['type'] === 'cut') {
                unlink($sourcePath);
                unset($_SESSION['clipboard']);
            }
            $message = "已粘贴：" . basename($destinationPath);
            $messageType = "success";
        } else {
            $message = "粘贴失败：没有权限或系统错误";
            $messageType = "error";
        }
    } elseif (is_dir($sourcePath)) {
        // 复制目录
        if (copyDirectory($sourcePath, $destinationPath)) {
            if ($clipboard['type'] === 'cut') {
                deleteDirectory($sourcePath);
                unset($_SESSION['clipboard']);
            }
            $message = "已粘贴：" . basename($destinationPath);
            $messageType = "success";
        } else {
            $message = "粘贴失败：没有权限或系统错误";
            $messageType = "error";
        }
    }
}

// 删除处理函数
function handleDelete($itemToDelete, $showMessage = true) {
    global $rootDir, $message, $messageType;
    
    if ((is_file($itemToDelete) || is_dir($itemToDelete)) && strpos(realpath($itemToDelete), realpath($rootDir)) === 0) {
        if (is_dir($itemToDelete)) {
            $success = deleteDirectory($itemToDelete);
        } else {
            $success = unlink($itemToDelete);
        }
        
        if ($success) {
            if ($showMessage) {
                $message = "已成功删除：" . basename($itemToDelete);
                $messageType = "success";
            }
            return true;
        } else {
            if ($showMessage) {
                $message = "删除失败：没有权限或文件正在使用";
                $messageType = "error";
            }
            return false;
        }
    } else {
        if ($showMessage) {
            $message = "无法删除：项目不存在或没有权限";
            $messageType = "error";
        }
        return false;
    }
}

// 递归删除目录
function deleteDirectory($dir) {
    if (!file_exists($dir)) return true;
    if (!is_dir($dir)) return unlink($dir);
    
    foreach (scandir($dir) as $item) {
        if ($item == '.' || $item == '..') continue;
        if (!deleteDirectory($dir . '/' . $item)) return false;
    }
    
    return rmdir($dir);
}

// 递归复制目录
function copyDirectory($source, $destination) {
    if (!is_dir($destination)) {
        mkdir($destination, 0755, true);
    }
    
    $dirHandle = opendir($source);
    if (!$dirHandle) return false;
    
    while (false !== ($file = readdir($dirHandle))) {
        if ($file != "." && $file != "..") {
            $srcFile = $source . '/' . $file;
            $destFile = $destination . '/' . $file;
            
            if (is_dir($srcFile)) {
                if (!copyDirectory($srcFile, $destFile)) {
                    return false;
                }
            } else {
                if (!copy($srcFile, $destFile)) {
                    return false;
                }
            }
        }
    }
    
    closedir($dirHandle);
    return true;
}

// 获取目录内容
$contents = [];
$dirHandle = opendir($fullPath);

if ($dirHandle) {
    while (false !== ($entry = readdir($dirHandle))) {
        if ($entry != "." && $entry != "..") {
            $entryPath = $fullPath . '/' . $entry;
            $entryRelativePath = $currentDir ? $currentDir . '/' . $entry : $entry;
            
            $fileInfo = [
                'name' => $entry,
                'path' => $entryRelativePath,
                'is_dir' => is_dir($entryPath),
                'size' => is_file($entryPath) ? filesize($entryPath) : 0,
                'modified' => filemtime($entryPath)
            ];
            
            $contents[] = $fileInfo;
        }
    }
    closedir($dirHandle);
    
    usort($contents, function($a, $b) {
        if ($a['is_dir'] && !$b['is_dir']) return -1;
        if (!$a['is_dir'] && $b['is_dir']) return 1;
        return strcmp($a['name'], $b['name']);
    });
}

// 格式化文件大小
function formatSize($bytes, $precision = 2) {
    $units = ['B', 'KB', 'MB', 'GB', 'TB'];
    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);
    return round($bytes / (1024 ** $pow), $precision) . ' ' . $units[$pow];
}

// 格式化时间
function formatTime($timestamp) {
    return date('Y-m-d H:i:s', $timestamp);
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FWC文件管理器</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        :root {
            --md-sys-color-primary: #006e1c;
            --md-sys-color-on-primary: #ffffff;
            --md-sys-color-primary-container: #90f891;
            --md-sys-color-on-primary-container: #002204;
            --md-sys-color-secondary: #52634f;
            --md-sys-color-on-secondary: #ffffff;
            --md-sys-color-secondary-container: #d5e8ce;
            --md-sys-color-on-secondary-container: #101f10;
            --md-sys-color-tertiary: #39656c;
            --md-sys-color-on-tertiary: #ffffff;
            --md-sys-color-tertiary-container: #bcebf2;
            --md-sys-color-on-tertiary-container: #001f24;
            --md-sys-color-surface: #fcfdf6;
            --md-sys-color-on-surface: #1a1c18;
            --md-sys-color-surface-variant: #e0e4d6;
            --md-sys-color-on-surface-variant: #43483e;
            --md-sys-color-outline: #73796d;
            --md-sys-color-outline-variant: #c3c8bb;
            --md-sys-color-error: #ba1a1a;
            --md-sys-color-on-error: #ffffff;
            --md-sys-color-error-container: #ffdad6;
            --md-sys-color-on-error-container: #410002;
            --md-sys-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
            --md-sys-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
            --md-sys-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
            --md-sys-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
            --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
            --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
            --md-sys-motion-duration-short: 200ms;
            --md-sys-motion-duration-medium: 300ms;
            --md-sys-motion-duration-long: 400ms;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            animation: pageLoad 0.8s var(--md-sys-motion-easing-standard);
        }

        @keyframes pageLoad {
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        /* Header */
        .header {
            background: var(--md-sys-color-surface);
            box-shadow: var(--md-sys-elevation-2);
            position: sticky;
            top: 0;
            z-index: 100;
            animation: slideDown 0.6s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes slideDown {
            from { 
                opacity: 0; 
                transform: translateY(-100%); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .header-content {
            max-width: 1440px;
            margin: 0 auto;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 22px;
            font-weight: 400;
            color: var(--md-sys-color-on-surface);
            animation: logoPulse 2s ease-in-out infinite;
        }

        @keyframes logoPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--md-sys-color-primary-container);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: iconRotate 3s ease-in-out infinite;
        }

        @keyframes iconRotate {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            75% { transform: rotate(-5deg); }
        }
        
        .logo-icon .material-icons {
            font-size: 24px;
            color: var(--md-sys-color-on-primary-container);
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--md-sys-color-on-surface-variant);
        }
        
        .logout-link {
            color: var(--md-sys-color-primary);
            text-decoration: none;
            font-weight: 500;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
            position: relative;
        }

        .logout-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--md-sys-color-primary);
            transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
        }

        .logout-link:hover::after {
            width: 100%;
        }
        
        .logout-link:hover {
            text-decoration: none;
            transform: translateY(-1px);
        }
        
        /* Main Content */
        .main-container {
            flex: 1;
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            padding: 24px;
            display: flex;
            gap: 24px;
            animation: contentAppear 0.8s var(--md-sys-motion-easing-standard) 0.2s both;
        }

        @keyframes contentAppear {
            from { 
                opacity: 0; 
                transform: translateY(30px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .sidebar {
            width: 280px;
            background: var(--md-sys-color-surface);
            border-radius: 16px;
            box-shadow: var(--md-sys-elevation-1);
            padding: 16px;
            height: fit-content;
            position: sticky;
            top: 88px;
            animation: slideInLeft 0.6s var(--md-sys-motion-easing-emphasized) 0.3s both;
        }

        @keyframes slideInLeft {
            from { 
                opacity: 0; 
                transform: translateX(-50px); 
            }
            to { 
                opacity: 1; 
                transform: translateX(0); 
            }
        }
        
        .sidebar-section {
            margin-bottom: 24px;
        }
        
        .sidebar-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--md-sys-color-on-surface-variant);
            margin-bottom: 12px;
            padding: 0 12px;
        }
        
        .sidebar-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
            text-decoration: none;
            color: var(--md-sys-color-on-surface);
            position: relative;
            overflow: hidden;
        }

        .sidebar-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(144, 248, 145, 0.1), transparent);
            transition: left var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
        }

        .sidebar-item:hover::before {
            left: 100%;
        }
        
        .sidebar-item:hover {
            background: var(--md-sys-color-surface-variant);
            transform: translateX(8px);
        }
        
        .sidebar-item.active {
            background: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            transform: translateX(8px);
            animation: activePulse 2s ease-in-out infinite;
        }

        @keyframes activePulse {
            0%, 100% { 
                box-shadow: 0 0 0 0 rgba(144, 248, 145, 0.4);
            }
            50% { 
                box-shadow: 0 0 0 8px rgba(144, 248, 145, 0);
            }
        }
        
        .sidebar-item .material-icons {
            font-size: 20px;
            transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .sidebar-item:hover .material-icons {
            transform: scale(1.1) rotate(5deg);
        }
        
        .content-area {
            flex: 1;
            min-width: 0;
            animation: slideInRight 0.6s var(--md-sys-motion-easing-emphasized) 0.4s both;
        }

        @keyframes slideInRight {
            from { 
                opacity: 0; 
                transform: translateX(50px); 
            }
            to { 
                opacity: 1; 
                transform: translateX(0); 
            }
        }
        
        /* Toolbar */
        .toolbar {
            background: var(--md-sys-color-surface);
            border-radius: 16px;
            box-shadow: var(--md-sys-elevation-1);
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            animation: toolbarSlide 0.5s var(--md-sys-motion-easing-standard) 0.5s both;
        }

        @keyframes toolbarSlide {
            from { 
                opacity: 0; 
                transform: translateY(-20px) scale(0.95); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0) scale(1); 
            }
        }
        
        .toolbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: none;
            border-radius: 100px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn:hover::before {
            width: 200px;
            height: 200px;
        }
        
        .btn-primary {
            background: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
        }
        
        .btn-primary:hover {
            box-shadow: var(--md-sys-elevation-2);
            transform: translateY(-2px) scale(1.02);
        }
        
        .btn-secondary {
            background: var(--md-sys-color-surface-variant);
            color: var(--md-sys-color-on-surface-variant);
        }
        
        .btn-secondary:hover {
            background: var(--md-sys-color-outline-variant);
            transform: translateY(-1px);
        }
        
        .btn-icon {
            padding: 10px;
        }

        .btn-icon:hover {
            transform: scale(1.1) rotate(5deg);
        }
        
        .btn .material-icons {
            font-size: 18px;
            transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .btn:hover .material-icons {
            transform: scale(1.1);
        }
        
        .search-box {
            position: relative;
            flex: 1;
            max-width: 400px;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 16px 12px 48px;
            border: 1px solid var(--md-sys-color-outline);
            border-radius: 24px;
            background: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            font-size: 14px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--md-sys-color-primary);
            border-width: 2px;
            transform: scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 110, 28, 0.15);
        }
        
        .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--md-sys-color-on-surface-variant);
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .search-input:focus + .search-icon {
            color: var(--md-sys-color-primary);
            transform: translateY(-50%) scale(1.1);
        }
        
        /* Breadcrumb */
        .breadcrumb {
            background: var(--md-sys-color-surface);
            border-radius: 16px;
            box-shadow: var(--md-sys-elevation-1);
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            animation: breadcrumbAppear 0.5s var(--md-sys-motion-easing-standard) 0.6s both;
        }

        @keyframes breadcrumbAppear {
            from { 
                opacity: 0; 
                transform: translateX(-20px); 
            }
            to { 
                opacity: 1; 
                transform: translateX(0); 
            }
        }
        
        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--md-sys-color-on-surface-variant);
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 8px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }
        
        .breadcrumb-item:hover {
            background: var(--md-sys-color-surface-variant);
            transform: translateY(-1px);
        }
        
        .breadcrumb-item.active {
            color: var(--md-sys-color-primary);
            font-weight: 500;
            animation: activeBreadcrumb 2s ease-in-out infinite;
        }

        @keyframes activeBreadcrumb {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .breadcrumb-separator {
            color: var(--md-sys-color-outline);
            animation: separatorBlink 2s ease-in-out infinite;
        }

        @keyframes separatorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* File Grid */
        .file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .file-item {
            background: var(--md-sys-color-surface);
            border-radius: 16px;
            box-shadow: var(--md-sys-elevation-1);
            padding: 16px;
            cursor: pointer;
            transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
            position: relative;
            overflow: hidden;
            animation: fileItemAppear 0.5s var(--md-sys-motion-easing-standard) both;
        }

        @keyframes fileItemAppear {
            from { 
                opacity: 0; 
                transform: scale(0.8) translateY(20px); 
            }
            to { 
                opacity: 1; 
                transform: scale(1) translateY(0); 
            }
        }

        .file-item:nth-child(1) { animation-delay: 0.7s; }
        .file-item:nth-child(2) { animation-delay: 0.75s; }
        .file-item:nth-child(3) { animation-delay: 0.8s; }
        .file-item:nth-child(4) { animation-delay: 0.85s; }
        .file-item:nth-child(5) { animation-delay: 0.9s; }
        .file-item:nth-child(6) { animation-delay: 0.95s; }
        .file-item:nth-child(7) { animation-delay: 1s; }
        .file-item:nth-child(8) { animation-delay: 1.05s; }
        
        .file-item:hover {
            box-shadow: var(--md-sys-elevation-2);
            transform: translateY(-4px) scale(1.02);
        }
        
        .file-item.selected {
            background: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            animation: selectedPulse 2s ease-in-out infinite;
        }

        @keyframes selectedPulse {
            0%, 100% { 
                box-shadow: 0 0 0 0 rgba(144, 248, 145, 0.6);
            }
            50% { 
                box-shadow: 0 0 0 10px rgba(144, 248, 145, 0);
            }
        }
        
        .file-item.selected .file-icon {
            background: var(--md-sys-color-on-primary-container);
            color: var(--md-sys-color-primary-container);
            animation: iconBounce 0.6s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes iconBounce {
            0%, 20%, 53%, 80%, 100% {
                transform: scale(1);
            }
            40%, 43% {
                transform: scale(1.3);
            }
            70% {
                transform: scale(1.1);
            }
            90% {
                transform: scale(1.2);
            }
        }
        
        .file-checkbox {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 20px;
            height: 20px;
            accent-color: var(--md-sys-color-primary);
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .file-checkbox:hover {
            transform: scale(1.2);
        }
        
        .file-icon {
            width: 48px;
            height: 48px;
            background: var(--md-sys-color-primary-container);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .file-item:hover .file-icon {
            transform: scale(1.1) rotate(5deg);
            animation: iconGlow 2s ease-in-out infinite;
        }

        @keyframes iconGlow {
            0%, 100% { 
                box-shadow: 0 0 0 0 rgba(144, 248, 145, 0.4);
            }
            50% { 
                box-shadow: 0 0 0 8px rgba(144, 248, 145, 0);
            }
        }
        
        .file-icon .material-icons {
            font-size: 24px;
            color: var(--md-sys-color-on-primary-container);
            transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }
        
        .file-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .file-item:hover .file-name {
            transform: translateX(4px);
        }
        
        .file-info {
            font-size: 12px;
            color: var(--md-sys-color-on-surface-variant);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }

        .file-item:hover .file-info {
            transform: translateX(4px);
        }
        
        .file-item.selected .file-info {
            color: var(--md-sys-color-on-primary-container);
        }
        
        /* Context Menu */
        .context-menu {
            position: fixed;
            background: var(--md-sys-color-surface);
            border-radius: 12px;
            box-shadow: var(--md-sys-elevation-3);
            padding: 8px;
            min-width: 200px;
            z-index: 1000;
            display: none;
            animation: contextMenuAppear 0.2s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes contextMenuAppear {
            from { 
                opacity: 0; 
                transform: scale(0.8) translateY(-10px); 
            }
            to { 
                opacity: 1; 
                transform: scale(1) translateY(0); 
            }
        }
        
        .context-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }
        
        .context-menu-item:hover {
            background: var(--md-sys-color-surface-variant);
            transform: translateX(4px);
        }
        
        .context-menu-item.danger {
            color: var(--md-sys-color-error);
        }

        .context-menu-item.danger:hover {
            background: var(--md-sys-color-error-container);
            animation: dangerShake 0.5s var(--md-sys-motion-easing-standard);
        }

        @keyframes dangerShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            75% { transform: translateX(3px); }
        }
        
        .context-menu-separator {
            height: 1px;
            background: var(--md-sys-color-outline-variant);
            margin: 8px 0;
            animation: separatorExpand 0.3s var(--md-sys-motion-easing-standard);
        }

        @keyframes separatorExpand {
            from { width: 0; }
            to { width: 100%; }
        }
        
        /* Modal */
        .modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            backdrop-filter: blur(4px);
            animation: modalBackdrop 0.3s var(--md-sys-motion-easing-standard);
        }

        @keyframes modalBackdrop {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            background: var(--md-sys-color-surface);
            border-radius: 28px;
            box-shadow: var(--md-sys-elevation-3);
            padding: 24px;
            max-width: 448px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalSlide 0.4s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes modalSlide {
            from { 
                opacity: 0; 
                transform: scale(0.8) translateY(50px); 
            }
            to { 
                opacity: 1; 
                transform: scale(1) translateY(0); 
            }
        }
        
        .modal-header {
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 16px;
            color: var(--md-sys-color-on-surface);
            animation: headerSlide 0.5s var(--md-sys-motion-easing-standard) 0.1s both;
        }

        @keyframes headerSlide {
            from { 
                opacity: 0; 
                transform: translateY(-20px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .modal-body {
            margin-bottom: 24px;
            animation: bodyAppear 0.5s var(--md-sys-motion-easing-standard) 0.2s both;
        }

        @keyframes bodyAppear {
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            animation: actionsAppear 0.5s var(--md-sys-motion-easing-standard) 0.3s both;
        }

        @keyframes actionsAppear {
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .form-input {
            width: 100%;
            padding: 16px;
            border: 1px solid var(--md-sys-color-outline);
            border-radius: 4px;
            background: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            font-size: 16px;
            margin-bottom: 16px;
            transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--md-sys-color-primary);
            border-width: 2px;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 110, 28, 0.15);
        }
        
        /* Toast */
        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--md-sys-color-inverse-surface);
            color: var(--md-sys-color-inverse-on-surface);
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: var(--md-sys-elevation-3);
            display: none;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            z-index: 3000;
            animation: toastSlide 0.5s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes toastSlide {
            from { 
                opacity: 0; 
                transform: translateX(-50%) translateY(100px); 
            }
            to { 
                opacity: 1; 
                transform: translateX(-50%) translateY(0); 
            }
        }
        
        .toast.show {
            display: flex;
        }
        
        .toast.success {
            background: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
            animation: toastSuccess 0.5s var(--md-sys-motion-easing-emphasized);
        }

        @keyframes toastSuccess {
            0% { 
                opacity: 0; 
                transform: translateX(-50%) translateY(100px) scale(0.8); 
            }
            50% { 
                transform: translateX(-50%) translateY(-10px) scale(1.05); 
            }
            100% { 
                opacity: 1; 
                transform: translateX(-50%) translateY(0) scale(1); 
            }
        }
        
        .toast.error {
            background: var(--md-sys-color-error);
            color: var(--md-sys-color-on-error);
            animation: toastError 0.6s var(--md-sys-motion-easing-standard);
        }

        @keyframes toastError {
            0%, 20%, 40%, 60%, 80% {
                transform: translateX(-50%) translateX(-5px);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-50%) translateX(5px);
            }
            100% {
                transform: translateX(-50%) translateX(0);
            }
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 64px 24px;
            color: var(--md-sys-color-on-surface-variant);
            animation: emptyStateAppear 0.8s var(--md-sys-motion-easing-standard) 0.7s both;
        }

        @keyframes emptyStateAppear {
            from { 
                opacity: 0; 
                transform: scale(0.9) rotate(-5deg); 
            }
            to { 
                opacity: 1; 
                transform: scale(1) rotate(0deg); 
            }
        }
        
        .empty-state .material-icons {
            font-size: 96px;
            margin-bottom: 16px;
            opacity: 0.6;
            animation: emptyIconFloat 3s ease-in-out infinite;
        }

        @keyframes emptyIconFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }
        
        .empty-state h3 {
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 8px;
        }
        
        .empty-state p {
            font-size: 16px;
        }
        
        /* Clipboard Indicator */
        .clipboard-indicator {
            background: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: clipboardPulse 2s ease-in-out infinite;
        }

        @keyframes clipboardPulse {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 110, 28, 0.4);
            }
            50% { 
                transform: scale(1.05);
                box-shadow: 0 0 0 8px rgba(0, 110, 28, 0);
            }
        }
        
        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--md-sys-color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                padding: 16px;
            }
            
            .sidebar {
                width: 100%;
                position: static;
            }
            
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .toolbar-actions {
                justify-content: center;
            }
            
            .file-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <div class="logo-icon">
                    <span class="material-icons">folder_managed</span>
                </div>
                FWC文件管理器
            </div>
            <div class="header-actions">
                <?php if (isset($_SESSION['clipboard'])): ?>
                <div class="clipboard-indicator">
                    <span class="material-icons">content_paste</span>
                    <?php echo $_SESSION['clipboard']['type'] === 'copy' ? '已复制' : '已剪切'; ?>: <?php echo htmlspecialchars($_SESSION['clipboard']['name']); ?>
                </div>
                <?php endif; ?>
                <div class="user-info">
                    <span class="material-icons">person</span>
                    <span>管理员</span>
                    <a href="?logout" class="logout-link">退出</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <div class="main-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-section">
                <div class="sidebar-title">快速访问</div>
                <a href="?dir=" class="sidebar-item active">
                    <span class="material-icons">home</span>
                    根目录
                </a>
                <?php if ($currentDir): ?>
                <a href="?dir=<?php echo urlencode(dirname($currentDir)); ?>" class="sidebar-item">
                    <span class="material-icons">arrow_upward</span>
                    上级目录
                </a>
                <?php endif; ?>
            </div>
            
            <div class="sidebar-section">
                <div class="sidebar-title">操作</div>
                <button class="sidebar-item" onclick="openCreateFolderModal()">
                    <span class="material-icons">create_new_folder</span>
                    新建文件夹
                </button>
                <button class="sidebar-item" onclick="openCreateFileModal()">
                    <span class="material-icons">note_add</span>
                    新建文件
                </button>
                <label class="sidebar-item" style="cursor: pointer;">
                    <span class="material-icons">upload</span>
                    上传文件
                    <input type="file" id="uploadInput" style="display: none;" onchange="handleFileUpload()">
                </label>
                <?php if (isset($_SESSION['clipboard'])): ?>
                <button class="sidebar-item" onclick="pasteItem()">
                    <span class="material-icons">content_paste</span>
                    粘贴
                </button>
                <?php endif; ?>
            </div>
        </aside>

        <!-- Content Area -->
        <main class="content-area">
            <!-- Toolbar -->
            <div class="toolbar">
                <div class="toolbar-actions">
                    <button class="btn btn-secondary btn-icon" onclick="refreshPage()" title="刷新">
                        <span class="material-icons">refresh</span>
                    </button>
                    <button class="btn btn-secondary" onclick="switchView('grid')" id="gridViewBtn" title="网格视图">
                        <span class="material-icons">grid_view</span>
                    </button>
                    <button class="btn btn-secondary" onclick="switchView('list')" id="listViewBtn" title="列表视图" style="display: none;">
                        <span class="material-icons">list</span>
                    </button>
                </div>
                
                <div class="search-box">
                    <span class="material-icons search-icon">search</span>
                    <input type="text" class="search-input" placeholder="搜索文件和文件夹..." id="searchInput">
                </div>
                
                <div class="toolbar-actions" id="selectedActions" style="display: none;">
                    <button class="btn btn-primary" onclick="copySelected()">
                        <span class="material-icons">content_copy</span>
                        复制
                    </button>
                    <button class="btn btn-secondary" onclick="cutSelected()">
                        <span class="material-icons">content_cut</span>
                        剪切
                    </button>
                    <button class="btn btn-primary" onclick="renameSelected()" id="renameBtn" style="display: none;">
                        <span class="material-icons">edit</span>
                        重命名
                    </button>
                    <button class="btn btn-secondary" onclick="downloadSelected()" id="downloadBtn" style="display: none;">
                        <span class="material-icons">download</span>
                        下载
                    </button>
                    <button class="btn btn-secondary" onclick="deleteSelected()" style="background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);">
                        <span class="material-icons">delete</span>
                        删除
                    </button>
                </div>
            </div>

            <!-- Breadcrumb -->
            <div class="breadcrumb">
                <a href="?dir=" class="breadcrumb-item">
                    <span class="material-icons">home</span>
                    根目录
                </a>
                
                <?php if ($currentDir): ?>
                    <span class="breadcrumb-separator">/</span>
                    <?php 
                    $pathParts = explode('/', $currentDir);
                    $currentPath = '';
                    foreach ($pathParts as $index => $part):
                        $currentPath .= ($currentPath ? '/' : '') . $part;
                        $isLast = $index == count($pathParts) - 1;
                    ?>
                        <a href="?dir=<?php echo urlencode($currentPath); ?>" class="breadcrumb-item <?php echo $isLast ? 'active' : ''; ?>">
                            <?php echo htmlspecialchars($part); ?>
                        </a>
                        <?php if (!$isLast): ?>
                            <span class="breadcrumb-separator">/</span>
                        <?php endif; ?>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <!-- File Grid -->
            <div class="file-grid" id="fileGrid">
                <?php if (empty($contents)): ?>
                    <div class="empty-state" style="grid-column: 1 / -1;">
                        <span class="material-icons">folder_open</span>
                        <h3>目录为空</h3>
                        <p>此目录中没有任何文件或文件夹</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($contents as $item): ?>
                        <div class="file-item" 
                             data-path="<?php echo htmlspecialchars($item['path']); ?>"
                             data-name="<?php echo htmlspecialchars($item['name']); ?>"
                             data-isdir="<?php echo $item['is_dir'] ? 'true' : 'false'; ?>"
                             onclick="handleItemClick(event, this)">
                            <input type="checkbox" class="file-checkbox" onclick="handleCheckboxClick(event, this)" data-path="<?php echo htmlspecialchars($item['path']); ?>">
                            
                            <div class="file-icon">
                                <?php if ($item['is_dir']): ?>
                                    <span class="material-icons">folder</span>
                                <?php else: ?>
                                    <?php 
                                    $ext = strtolower(pathinfo($item['name'], PATHINFO_EXTENSION));
                                    $icon = 'description';
                                    
                                    switch ($ext) {
                                        case 'txt': $icon = 'description'; break;
                                        case 'pdf': $icon = 'picture_as_pdf'; break;
                                        case 'doc':
                                        case 'docx': $icon = 'description'; break;
                                        case 'xls':
                                        case 'xlsx': $icon = 'table_chart'; break;
                                        case 'ppt':
                                        case 'pptx': $icon = 'slideshow'; break;
                                        case 'jpg':
                                        case 'jpeg':
                                        case 'png':
                                        case 'gif': $icon = 'image'; break;
                                        case 'zip':
                                        case 'rar':
                                        case '7z': $icon = 'archive'; break;
                                        case 'php':
                                        case 'html':
                                        case 'css':
                                        case 'js': $icon = 'code'; break;
                                        case 'mp3':
                                        case 'wav': $icon = 'audio_file'; break;
                                        case 'mp4':
                                        case 'avi': $icon = 'video_file'; break;
                                    }
                                    ?>
                                    <span class="material-icons"><?php echo $icon; ?></span>
                                <?php endif; ?>
                            </div>
                            
                            <div class="file-name"><?php echo htmlspecialchars($item['name']); ?></div>
                            <div class="file-info">
                                <span><?php echo formatTime($item['modified']); ?></span>
                                <?php if (!$item['is_dir']): ?>
                                    <span>•</span>
                                    <span><?php echo formatSize($item['size']); ?></span>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </main>
    </div>

    <!-- Context Menu -->
    <div class="context-menu" id="contextMenu">
        <div class="context-menu-item" onclick="openItem()">
            <span class="material-icons">open_in_new</span>
            打开
        </div>
        <div class="context-menu-item" onclick="downloadItem()">
            <span class="material-icons">download</span>
            下载
        </div>
        <div class="context-menu-separator"></div>
        <div class="context-menu-item" onclick="copyItem()">
            <span class="material-icons">content_copy</span>
            复制
        </div>
        <div class="context-menu-item" onclick="cutItem()">
            <span class="material-icons">content_cut</span>
            剪切
        </div>
        <div class="context-menu-separator"></div>
        <div class="context-menu-item" onclick="renameItem()">
            <span class="material-icons">edit</span>
            重命名
        </div>
        <div class="context-menu-item danger" onclick="deleteItem()">
            <span class="material-icons">delete</span>
            删除
        </div>
    </div>

    <!-- Rename Modal -->
    <div class="modal" id="renameModal">
        <div class="modal-content">
            <h2 class="modal-header">重命名</h2>
            <div class="modal-body">
                <input type="text" class="form-input" id="renameInput" placeholder="输入新名称">
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeModal('renameModal')">取消</button>
                <button class="btn btn-primary" onclick="confirmRename()">确定</button>
            </div>
        </div>
    </div>

    <!-- Create Folder Modal -->
    <div class="modal" id="createFolderModal">
        <div class="modal-content">
            <h2 class="modal-header">新建文件夹</h2>
            <div class="modal-body">
                <input type="text" class="form-input" id="folderNameInput" placeholder="输入文件夹名称">
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeModal('createFolderModal')">取消</button>
                <button class="btn btn-primary" onclick="confirmCreateFolder()">创建</button>
            </div>
        </div>
    </div>

    <!-- Create File Modal -->
    <div class="modal" id="createFileModal">
        <div class="modal-content">
            <h2 class="modal-header">新建文件</h2>
            <div class="modal-body">
                <input type="text" class="form-input" id="fileNameInput" placeholder="输入文件名称（包含扩展名）">
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeModal('createFileModal')">取消</button>
                <button class="btn btn-primary" onclick="confirmCreateFile()">创建</button>
            </div>
        </div>
    </div>

    <!-- Toast -->
    <div class="toast" id="toast">
        <span class="material-icons" id="toastIcon">check_circle</span>
        <span id="toastMessage">操作成功</span>
    </div>

    <script>
        let selectedItems = new Set();
        let currentContextItem = null;
        let currentRenameItem = null;

        // 处理项目点击
        function handleItemClick(event, element) {
            if (event.target.type === 'checkbox') return;
            
            const isDir = element.dataset.isdir === 'true';
            const path = element.dataset.path;
            
            if (isDir) {
                // 文件夹：打开
                window.location.href = `?dir=${encodeURIComponent(path)}`;
            } else {
                // 文件：下载
                window.location.href = `?download=${encodeURIComponent(path)}`;
            }
        }

        // 处理复选框点击
        function handleCheckboxClick(event, checkbox) {
            event.stopPropagation();
            const path = checkbox.dataset.path;
            
            if (checkbox.checked) {
                selectedItems.add(path);
                checkbox.closest('.file-item').classList.add('selected');
            } else {
                selectedItems.delete(path);
                checkbox.closest('.file-item').classList.remove('selected');
            }
            
            updateSelectedActions();
        }

        // 更新选中操作
        function updateSelectedActions() {
            const actions = document.getElementById('selectedActions');
            const renameBtn = document.getElementById('renameBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            
            if (selectedItems.size > 0) {
                actions.style.display = 'flex';
                
                // 如果只选中一个项目，显示重命名按钮
                if (selectedItems.size === 1) {
                    renameBtn.style.display = 'flex';
                    const selectedPath = Array.from(selectedItems)[0];
                    const selectedElement = document.querySelector(`[data-path="${selectedPath}"]`);
                    if (selectedElement && selectedElement.dataset.isdir === 'false') {
                        downloadBtn.style.display = 'flex';
                    } else {
                        downloadBtn.style.display = 'none';
                    }
                } else {
                    renameBtn.style.display = 'none';
                    downloadBtn.style.display = 'none';
                }
            } else {
                actions.style.display = 'none';
            }
        }

        // 显示右键菜单
        document.addEventListener('contextmenu', function(event) {
            const fileItem = event.target.closest('.file-item');
            if (fileItem) {
                event.preventDefault();
                showContextMenu(event, fileItem);
            }
        });

        function showContextMenu(event, element) {
            currentContextItem = element;
            const contextMenu = document.getElementById('contextMenu');
            const isDir = element.dataset.isdir === 'true';
            
            // 根据项目类型显示/隐藏菜单项
            const openItem = contextMenu.children[0];
            const downloadItem = contextMenu.children[1];
            const separator1 = contextMenu.children[2];
            const copyItem = contextMenu.children[3];
            const cutItem = contextMenu.children[4];
            const separator2 = contextMenu.children[5];
            
            if (isDir) {
                openItem.style.display = 'flex';
                downloadItem.style.display = 'none';
                separator1.style.display = 'none';
            } else {
                openItem.style.display = 'none';
                downloadItem.style.display = 'flex';
                separator1.style.display = 'block';
            }
            
            copyItem.style.display = 'flex';
            cutItem.style.display = 'flex';
            separator2.style.display = 'block';
            
            contextMenu.style.display = 'block';
            contextMenu.style.left = event.clientX + 'px';
            contextMenu.style.top = event.clientY + 'px';
        }

        // 隐藏右键菜单
        document.addEventListener('click', function() {
            document.getElementById('contextMenu').style.display = 'none';
        });

        // 右键菜单操作
        function openItem() {
            if (currentContextItem) {
                const path = currentContextItem.dataset.path;
                window.location.href = `?dir=${encodeURIComponent(path)}`;
            }
        }

        function downloadItem() {
            if (currentContextItem) {
                const path = currentContextItem.dataset.path;
                window.location.href = `?download=${encodeURIComponent(path)}`;
            }
        }

        function copyItem() {
            if (currentContextItem) {
                const path = currentContextItem.dataset.path;
                const form = document.createElement('form');
                form.method = 'post';
                form.innerHTML = `
                    <input type="hidden" name="copy" value="1">
                    <input type="hidden" name="copy_path" value="${path}">
                `;
                document.body.appendChild(form);
                form.submit();
            }
        }

        function cutItem() {
            if (currentContextItem) {
                const path = currentContextItem.dataset.path;
                const form = document.createElement('form');
                form.method = 'post';
                form.innerHTML = `
                    <input type="hidden" name="cut" value="1">
                    <input type="hidden" name="cut_path" value="${path}">
                `;
                document.body.appendChild(form);
                form.submit();
            }
        }

        function renameItem() {
            if (currentContextItem) {
                currentRenameItem = currentContextItem;
                const name = currentContextItem.dataset.name;
                document.getElementById('renameInput').value = name;
                showModal('renameModal');
            }
        }

        function deleteItem() {
            if (currentContextItem) {
                const path = currentContextItem.dataset.path;
                if (confirm('确定要删除这个项目吗？')) {
                    const form = document.createElement('form');
                    form.method = 'post';
                    form.innerHTML = `
                        <input type="hidden" name="delete" value="1">
                        <input type="hidden" name="delete_path" value="${path}">
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            }
        }

        // 复制选中的项目
        function copySelected() {
            if (selectedItems.size > 0) {
                const form = document.createElement('form');
                form.method = 'post';
                form.innerHTML = '<input type="hidden" name="copy" value="1">';
                
                // 只复制第一个选中的项目
                const firstPath = Array.from(selectedItems)[0];
                form.innerHTML += `<input type="hidden" name="copy_path" value="${firstPath}">`;
                
                document.body.appendChild(form);
                form.submit();
            }
        }

        // 剪切选中的项目
        function cutSelected() {
            if (selectedItems.size > 0) {
                const form = document.createElement('form');
                form.method = 'post';
                form.innerHTML = '<input type="hidden" name="cut" value="1">';
                
                // 只剪切第一个选中的项目
                const firstPath = Array.from(selectedItems)[0];
                form.innerHTML += `<input type="hidden" name="cut_path" value="${firstPath}">`;
                
                document.body.appendChild(form);
                form.submit();
            }
        }

        // 粘贴项目
        function pasteItem() {
            const form = document.createElement('form');
            form.method = 'post';
            form.innerHTML = '<input type="hidden" name="paste" value="1">';
            document.body.appendChild(form);
            form.submit();
        }

        // 重命名选中的项目
        function renameSelected() {
            if (selectedItems.size === 1) {
                const path = Array.from(selectedItems)[0];
                const element = document.querySelector(`[data-path="${path}"]`);
                currentRenameItem = element;
                const name = element.dataset.name;
                document.getElementById('renameInput').value = name;
                showModal('renameModal');
            }
        }

        function downloadSelected() {
            if (selectedItems.size === 1) {
                const path = Array.from(selectedItems)[0];
                window.location.href = `?download=${encodeURIComponent(path)}`;
            }
        }

        function deleteSelected() {
            if (selectedItems.size > 0) {
                if (confirm(`确定要删除选中的 ${selectedItems.size} 个项目吗？`)) {
                    const form = document.createElement('form');
                    form.method = 'post';
                    form.innerHTML = '<input type="hidden" name="batch_delete" value="1">';
                    
                    selectedItems.forEach(path => {
                        form.innerHTML += `<input type="hidden" name="selected_items[]" value="${path}">`;
                    });
                    
                    document.body.appendChild(form);
                    form.submit();
                }
            }
        }

        // 模态框操作
        function showModal(modalId) {
            document.getElementById(modalId).classList.add('show');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        function confirmRename() {
            const newName = document.getElementById('renameInput').value.trim();
            if (!newName) {
                showToast('名称不能为空', 'error');
                return;
            }
            
            const form = document.createElement('form');
            form.method = 'post';
            form.innerHTML = `
                <input type="hidden" name="rename" value="1">
                <input type="hidden" name="old_path" value="${currentRenameItem.dataset.path}">
                <input type="hidden" name="new_name" value="${newName}">
            `;
            document.body.appendChild(form);
            form.submit();
        }

        // 新建文件夹
        function openCreateFolderModal() {
            showModal('createFolderModal');
            document.getElementById('folderNameInput').focus();
        }

        function confirmCreateFolder() {
            const folderName = document.getElementById('folderNameInput').value.trim();
            if (!folderName) {
                showToast('文件夹名称不能为空', 'error');
                return;
            }
            
            const form = document.createElement('form');
            form.method = 'post';
            form.innerHTML = `
                <input type="hidden" name="create_folder" value="1">
                <input type="hidden" name="folder_name" value="${folderName}">
            `;
            document.body.appendChild(form);
            form.submit();
        }

        // 新建文件
        function openCreateFileModal() {
            showModal('createFileModal');
            document.getElementById('fileNameInput').focus();
        }

        function confirmCreateFile() {
            const fileName = document.getElementById('fileNameInput').value.trim();
            if (!fileName) {
                showToast('文件名称不能为空', 'error');
                return;
            }
            
            const form = document.createElement('form');
            form.method = 'post';
            form.innerHTML = `
                <input type="hidden" name="create_file" value="1">
                <input type="hidden" name="file_name" value="${fileName}">
            `;
            document.body.appendChild(form);
            form.submit();
        }

        // 文件上传
        function handleFileUpload() {
            const fileInput = document.getElementById('uploadInput');
            if (fileInput.files.length > 0) {
                const form = new FormData();
                form.append('file', fileInput.files[0]);
                form.append('upload_file', '1');
                
                fetch('', {
                    method: 'POST',
                    body: form
                }).then(() => {
                    location.reload();
                });
            }
        }

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const fileItems = document.querySelectorAll('.file-item');
            
            fileItems.forEach(item => {
                const fileName = item.dataset.name.toLowerCase();
                if (fileName.includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        // 刷新页面
        function refreshPage() {
            location.reload();
        }

        // 切换视图
        function switchView(view) {
            // 这里可以实现列表视图和网格视图的切换
            showToast('视图切换功能开发中...', 'success');
        }

        // Toast 通知
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toastMessage');
            const toastIcon = document.getElementById('toastIcon');
            
            toastMessage.textContent = message;
            toast.className = `toast ${type}`;
            
            if (type === 'success') {
                toastIcon.textContent = 'check_circle';
            } else if (type === 'error') {
                toastIcon.textContent = 'error';
            }
            
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                // 关闭所有模态框
                document.querySelectorAll('.modal.show').forEach(modal => {
                    modal.classList.remove('show');
                });
                
                // 清除选择
                selectedItems.clear();
                document.querySelectorAll('.file-item').forEach(item => {
                    item.classList.remove('selected');
                    item.querySelector('.file-checkbox').checked = false;
                });
                updateSelectedActions();
            }
            
            if (e.key === 'Delete' && selectedItems.size > 0) {
                deleteSelected();
            }
            
            if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
                e.preventDefault();
                // 全选
                document.querySelectorAll('.file-item').forEach(item => {
                    const checkbox = item.querySelector('.file-checkbox');
                    const path = item.dataset.path;
                    
                    checkbox.checked = true;
                    selectedItems.add(path);
                    item.classList.add('selected');
                });
                updateSelectedActions();
            }
            
            // 复制快捷键
            if ((e.ctrlKey || e.metaKey) && e.key === 'c' && selectedItems.size > 0) {
                e.preventDefault();
                copySelected();
            }
            
            // 剪切快捷键
            if ((e.ctrlKey || e.metaKey) && e.key === 'x' && selectedItems.size > 0) {
                e.preventDefault();
                cutSelected();
            }
            
            // 粘贴快捷键
            if ((e.ctrlKey || e.metaKey) && e.key === 'v' && <?php echo isset($_SESSION['clipboard']) ? 'true' : 'false'; ?>) {
                e.preventDefault();
                pasteItem();
            }
        });

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 显示消息
            <?php if (!empty($message)): ?>
                showToast('<?php echo addslashes($message); ?>', '<?php echo $messageType; ?>');
            <?php endif; ?>
        });
    </script>
</body>
</html>